<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>jscript08이벤트처리</title>
	</head>

	<body>
		<h1>이벤트 처리</h1>
		<h3>이벤트 발생시 특정코드를 실행할 수 있음</h3>
		<p>이벤트 종류</p>
		<p>onclick:객체를 클릭했을땨ㅐ</p>
		<p>onload:브라우저를 통해 문서가 읽혀진후</p>
		<p>onsubmit:submit버튼을 클릭했을떄</p>
		<p>onfocus:객체에 포커스를 받을때</p>
		<p>onblur:객체가 포커스를 잃을때</p>
		<p>onkeyup:키를 누르후 손을 놓을때</p>
		
		<h3>이벤트 추가</h3>
		<p>인라인 이벤트로 추가:hrml태그에 on~ 속성을 이용(비추)</p>
		<p>객체의 이벤트 속성으로 추가: 객체.on~=function(){};(추천)</p>
		<p>이벤트 리스너를 이용:객체.addEventListener("이벤트",함수,버블링 여부);(웹 표준, 적극추천!)</p>
		<hr/>
		
		<h1> </h1>
		<h1> </h1>
		<button id="btn1">객체 이벤트 속성으로 처리</button>		
		<button id="btn2">이벤트 리스너로 처리</button>		
		
		<div>
			<input type="text" name="uid"/>
			<button id="btn3">입력완료</button>
			<span id="txtlength"> </span>
		</div>
		
		<div id="box" style="width: 250px; height:100px; background: red; 
		color: white; font-weight: bold; font-size: 1.5em; text-align:center; padding-top: 85px;"
		>마우스를 올려보세요!</div>
		
		
		
		
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			btn1.onclick = function(){say1();};
			var btn2 = document.getElementById("btn2");
			btn2.addEventListener("click",say2,true);
			//btn2.attachEvent("onclick",say2); //IE8이하
			var btn3 = document.getElementById("btn3");
			btn3.addEventListener("click",sayuid,true);
			var box = document.getElementById("box");
			box.addEventListener("mouseover",box1,true);
			box.addEventListener("mouseout",box2,true);
			
			var input = document.getElementsByTagName("input");
			input[0].addEventListener("keyup",say3,true);
			
			
			function say1(){
				var h1s=document.getElementsByTagName("h1");
				h1s[1].innerHTML += "객체속성 이벤트";
			};
			function say2(){
				var h1s=document.getElementsByTagName("h1");
				h1s[2].innerHTML += "이벤트 리스너";
			};
			function sayuid(){
				var uid = document.getElementsByName("uid");
				if(uid[0].value ==  ""){
					alert("아이디를 입력하세요!");
					uid[0].focus();
				};
			};
			function box1(){
				box.innerHTML = "이글이 보이나요?";
			}
			function box2(){
				box.innerHTML = "이글이 변했나요?";
			}
			function say3(){
				var txt = document.getElementById("txtlength");
				txt.innerHTML = input[0].value.length;
			}
			
			
			
			
			
			
			//문서가 다 읽혀지면 
			//브라우저가 문서를 다 읽었을떄
		 	window.onlopad = function(){alert("문서 모두 읽음");};
			
			
			
			
			
			
			
			
			
			
		</script>
	</body>
</html>
